<template>
  <div class="AgencyDetails">
    <Box>
      <div slot="box" style="display: flex;justify-content: space-between;">
        <div>
          <h2>{{ xq.name }}</h2>
          <div>
            <div>
              <span>编辑日期：{{ xq.editTime }}</span>
              &emsp;&emsp;&emsp;
              <span>编辑人：{{ xq.createBy }}</span>
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;">
          <div style="margin-right: 20px"><a-button type="primary" @click="textList(xq.id)">预案编辑</a-button></div>
        </div>
      </div>
    </Box>
    <Box>
      <h3 slot="title" style="margin: 10px 15px">预案措施</h3>
      <div slot="box">
        <p class="box" style="font-size: 1.1rem">{{ xq.measures }}</p>
      </div>
    </Box>
    <Box>
      <h3 slot="title" style="margin: 10px 15px">预案流程</h3>
      <div slot="box">
        <p class="box" style="font-size: 1.1rem">{{ xq.technologicalProcess }}</p>
      </div>
    </Box>
    <Box>
      <h3 slot="title" style="margin: 10px 15px">参与人员</h3>
      <div slot="box">
        <a-table :columns="columns1" :data-source="xq.planUsers">

        </a-table>
      </div>
    </Box>

  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import { getDictItemsFromCache } from '@api/api'
import { detailsList, getInformation, topXiangping } from '@api/xlgc/Res'
import CustomTable from '@/components/zxd/Table/CustomTable'
import { lookManage } from '@api/xlgc/plan'

export default {
  name: 'AgencyDetails',
  components: { Box, CustomTable },
  props:['ide'],
  data() {
    return {
      current: 1,
      sum: 0,
      Information: [],
      visible2: false,
      detailed: {},
      size: 'default',
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      list: [],
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      columns1: [
        {
          title: '部门',
          dataIndex: 'department',
          scopedSlots: { customRender: 'department' }
        },
        {
          title: '姓名',
          dataIndex: 'name',

          scopedSlots: { customRender: 'name' }
        },
        {
          title: '职务',
          dataIndex: 'duties',

          scopedSlots: { customRender: 'duties' }
        },
        {
          title: '负责内容',
          dataIndex: 'responsibleContent',
          scopedSlots: { customRender: 'responsibleContent' }
        }
      ],
      xq: {
        storageLocation: '',
        region: '',
        createTime: '',
        createBy: '',
        longitude: '',
        latitude: ''
      },
      id: undefined
    }
  },
  mounted() {
    this.id = this.$route.query.id
    // this.AgencyDetails(this.id)
    // this.$emit('planss',this.id)
    if(this.ide !== undefined){
      this.AgencyDetails(this.ide)
    }
  },
  watch: {
    $route(data) {
      this.AgencyDetails(data.query)
    },
    // ide:{
    //   deep:true,
    //   handler(a,b){
    //     alert(this.ide)
    //     // this.AgencyDetails(this.ide)
    //   }
    // }
  },
  methods: {
    textList(val) {
      // console.log(val)
      this.$router.push({
        path: '/manage/addList',
        query: {
          item: true,
          id: val
        }
      })
    },
    doCopy: function(val) {
      let thls = this
      let text = document.querySelector('#sj').innerHTML
      this.$copyText(text).then(
        function(e) {
          thls.$message.success('复制成功', 2)
          console.log(e)
        },
        function(e) {
          console.log(e)
        }
      )
    },
    computeds(val) {
      let sum = 0
      console.log(val)
      for (let item of val) {
        sum = sum + item.callsNumber
      }

      return '合计调用物资：' + sum
    },
    diaoyong() {
      this.visible2 = true
      // this.id = this.$route.query.id
      // this.storageLocation = this.$route.query.storageLocation
    },
    objData(val) {
      console.log(val)
    },
    handleOk2() {
      this.$refs.transfer.planning()
    },
    skip(val) {},
    callback(key) {
      console.log(key)
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.AgencyDetails(this.pageFilter)
    },
    showModal(val) {
      this.detailed = val
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    AgencyDetails(val) {
      lookManage(val)
        .then(response => {
          console.log(response)
          if (response.code == 200) {
            this.xq = response.result
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    transmit(){
      this.$emit('planss',this.xq)
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>
/deep/.ant-table-footer {
  display: flex;
  justify-content: center;
}
.box {
  width: 100%;
  /*height: 50%;*/
  display: -webkit-box;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  word-break:break-all;

  text-overflow: ellipsis;

}
</style>
